<template>
		<view>
			<!-- 无商品维护页面 -->
			<view v-if="!dataswitch"><u-empty style="top:340rpx;position: relative;" text="暂无数据"></u-empty></view>
			
	<view class="container" v-if="dataswitch" >
		<!-- 瀑布流商品列表 -->
			<view class="centergoods">
				<view class="goods-wrapper" v-if="(index + 1) % 2 != 0" v-for="(item, index) in goodsList" :key="index" @click="ongoods(item)">
					<image class="img" src="https://peonyoss.longchimudan.com/peony/goods/e53b3af59bcf4aca9702df88ea105f46.jpg"></image>
					<view class="goods-item">
						<view class="title">
							悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液
						</view>
						<view class="item">
							<view class="Price">￥15.00</view>
							<view class="Sold">已售 56324</view>
						</view>
					</view>
				</view>
			</view>
			<view class="centergoods">
				<view class="goods-wrapper" v-if="(index + 1) % 2 == 0" v-for="(item, index) in goodsList" :key="index" @click="ongoods(item)">
					<image class="img" src="https://peonyoss.longchimudan.com/peony/goods/e53b3af59bcf4aca9702df88ea105f46.jpg"></image>
					<view class="goods-item">
						<view class="title">
							悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液
						</view>
						<view class="item">
							<view class="Price">￥15.00</view>
							<view class="Sold">已售 56324</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	computed: {
		...mapGetters(['imgBaseUrl'])
	},
	data() {
		return {
			url: 'https://peonyoss.longchimudan.com', //阿里oss地址
			goodsList: [
				{ id: '1' },
				{ id: '2' },
				{ id: '3' },
				{ id: '4' },
				{ id: '5' },
				{ id: '6' }
			],
			dataswitch:true
		};
	},
	computed: {},
	created() {},

	methods: {
		ongoods(item) {
			uni.navigateTo({
				url:'../../pages/goods-detail/index',
			})
			console.log(item, '点击了商品，这里要跳转详情页');
		}
	}
};
</script>

<style lang="scss">
@import '@/styles/mixin.scss';
.container {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	background-color: #f5f5f5;
	z-index: 6;
	margin-top: 20rpx;
	.centergoods {
		padding: 5rpx 8rpx 0 8rpx;
		background-color: #f5f5f5;
		width: 50%;
		box-sizing: border-box;
		border-radius: 30rpx;
		.goods-wrapper {
			margin-top: 15rpx;
			padding: 0 0 25rpx 0;
			background-color: #ffffff;
			align-items: center;
			border-radius: 30rpx;
			overflow: hidden;
			width: 100%;
			.img {
				width: 340rpx;
				height: 340rpx;
			}
			.goods-item {
				background-color: #ffffff;
				margin: 20rpx;
				.title {
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: 26rpx;
					color: #222222;
					font-weight: 400;
				}
				.item {
					margin: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					width: 100%;
					height: 55rpx;
					.Price {
						font-size: 32rpx;
						font-weight: bold;
						color: #f53942;
					}
					.Sold {
						font-size: 20rpx;
						font-weight: 500;
						color: #888888;
					}
				}
				//
			}
		}
	}
}
</style>
